import React, { Component } from 'react';

import { Layout, Menu, Button } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
} from '@ant-design/icons';

import './index.css';
import { Route, NavLink } from 'react-router-dom';

const { Header, Sider, Content } = Layout;

class Auth extends Component {
    constructor(props) {
        super(props);

        let menus = window.sessionStorage.getItem('menus');

        if (menus) {
            menus = JSON.parse(menus);
        } else {
            menus = [];
        }

        let user = window.sessionStorage.getItem('user');

        if (user) {
            user = JSON.parse(user);
        } else {
            user = {};
        }

        this.state = {
            collapsed: false,
            menus,
            user,
        };
    }

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    logout = () => {
        // 清空登录信息
        window.sessionStorage.clear();
        // 跳转到登录页面
        this.props.history.push('/login');
    };

    render() {
        const { routes } = this.props;
        console.log('routes', routes);

        return (
            <div className="auth">
                {/* layout 是布局容器，只要 layout 内有 Header、Footer 组件，它就是：上下布局，否则就是：左右布局 */}
                <Layout className="auth-layout">
                    <Sider
                        className="auth-layout-sider"
                        trigger={null}
                        collapsible
                        collapsed={this.state.collapsed}
                    >
                        <div className="logo">
                            <p>1712B成绩管理系统</p>
                        </div>

                        <Menu theme="light" mode="inline">
                            {this.state.menus.map((item) => {
                                return (
                                    <Menu.Item
                                        key={item.path}
                                        icon={<UserOutlined />}
                                    >
                                        <NavLink to={item.path}>
                                            {item.name}
                                        </NavLink>
                                    </Menu.Item>
                                );
                            })}
                        </Menu>
                    </Sider>

                    <Layout>
                        <Header className="auth-layout-header">
                            {React.createElement(
                                this.state.collapsed
                                    ? MenuUnfoldOutlined
                                    : MenuFoldOutlined,
                                {
                                    className: 'trigger',
                                    onClick: this.toggle,
                                },
                            )}

                            <div className="profile">
                                欢迎，
                                <span>{this.state.user.nickname}</span>{' '}
                                <span>{this.state.user.rname}</span>
                                <Button size="small" onClick={this.logout}>
                                    退出登录
                                </Button>
                            </div>
                        </Header>

                        <Content className="auth-layout-content">
                            {routes.map((routeConfig) => {
                                return (
                                    <Route
                                        key={routeConfig.path}
                                        {...routeConfig}
                                    />
                                );
                            })}
                        </Content>
                    </Layout>
                </Layout>
            </div>
        );
    }
}

export default Auth;
